<template>
  <div class="use-mouse-in-element">
    <div ref="target" class="test-box"></div>
  </div>
  <div class="status">鼠标是否在use-mouse-in-element内？{{ isOutside }}，x: {{ x }}，y: {{ y }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useMouseInElement } from "@vueuse/core";

defineOptions({
  name: "UseMouseInElement"
})
const target = ref<HTMLElement | null>(null)

const { x, y, isOutside } = useMouseInElement(target)
</script>

<style scoped lang="css">
.test-box {
  width: 400px;
  height: 400px;
  background-color: #cccccc;
  margin: 60px auto;
}
</style>
